<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-box">
    <el-card class="box-card">
      <!-- 具名插槽header -->
      <template #header>
        <!-- <img src="@/assets/loginheader" alt=""> -->
        <div class="loginheader-img">
          <el-image
            style="width: 96px; height: 96px"
            :src="require('@/assets/loginheader.png')"
          ></el-image>

          <!--  -->
        </div>
      </template>
      <!-- 默认插槽 -->
      <template #default>
        <el-form :model="logindata" :rules="rules" ref="loginForm">
          <el-form-item prop="loginName">
            <el-input
              placeholder="请输入手机号"
              prefix-icon="el-icon-mobile-phone"
              v-model="logindata.loginName"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <!-- <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="logindata.password"
              type="password"
            > -->
            <el-input
              placeholder="请输入密码"
              v-model="logindata.password"
              show-password
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item class="yzmitme" prop="verification">
            <el-input
              placeholder="请输入验证码"
              class="yzminput"
              prefix-icon="iconfont icon-anquan"
              v-model="logindata.verification"
            >
            </el-input>
            <el-image
              style="width: 140px; height: 50px"
              :src="imgurl"
              class="yzmimg"
              @click="clickImg"
            ></el-image>
          </el-form-item>
          <el-form-item
            ><el-button @click="clickLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
import request from '@/utils/request.js'
import { setToken } from '@/utils/storage'
export default {
  data () {
    return {
      url1: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      logindata: {
        loginName: 'admin',
        password: 'admin',
        verification: ''
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', 'change']
          },
          {
            min: 5,
            max: 11,
            message: '长度在 5 到 11 个字符',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\w{5,11}$/,
            message: '请输入 5 到 10 位的密码',
            trigger: ['blur', 'change']
          }
        ],
        verification: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          }
        ]
      },
      imgurl: '',
      randomImg: ''
    }
  },
  async created () {
    this.randomImg = this.generateMixed(16)
    this.imgurl =
      request.defaults.baseURL +
      'api/user-service/user/imageCode/' +
      this.randomImg
    // console.log(this.imgurl)
    /* console.log(random)
    const res = await Imgvalidate(random)
    console.log(res)
    const blob = new Blob([res])
    const url = window.URL.createObjectURL(blob)
    console.log('转成了图片')
    console.log(url) */
  },
  methods: {
    async clickLogin () {
      // console.log('点击了登录按钮')

      try {
        // 先校验整个表单
        await this.$refs.loginForm.validate()
        // 调用api的login方法，发送请求
        const result = await login({
          loginName: this.logindata.loginName,
          password: this.logindata.password,
          code: this.logindata.verification.trim(),
          loginType: 0,
          clientToken: this.randomImg
        })
        // 调用了登录接口
        // console.log('调用了登录接口')
        // console.log(result)
        setToken(result.token)
        this.$store.commit('user/usersetToken', result)
        // 调用登录接口成功跟换验证码同时清空验证码内容
        this.clickImg()
        this.logindata.verification = ' '
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        // 跳转首页
        this.$router.push('/')
      } catch (error) {
        console.log(error)
      }
    },
    // 生成n位数字字母混合字符串
    generateMixed (n) {
      const chars = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
      let res = ''
      for (let i = 0; i < n; i++) {
        const id = Math.floor(Math.random() * 36)
        res += chars[id]
      }
      return res
    },

    // 点击验证码跟换图片
    clickImg () {
      this.randomImg = this.generateMixed(16)
      this.imgurl =
        request.defaults.baseURL +
        'api/user-service/user/imageCode/' +
        this.randomImg
    }
  }
}
</script>

<style lang="scss" scoped>
// 1 给组件标签加类
// 2 直接使用组件的标签名
.login-box {
  min-height: 100vh;
  background: url(@/assets/loginbg.png) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
::v-deep .el-card {
  // position: relative;
  overflow: unset;
  width: 500px;
  margin: 0 auto;
  border-radius: 10px;
  .el-card__header {
    border-bottom: 0px;
  }
  .loginheader-img {
    position: relative;
    // width: 380px;
    height: 20px;
    // background-color: pink;
    .el-image {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -85%);
    }
  }
  .el-form {
    // background-color: pink;
    height: 250px;
    padding: 20px;
    .el-form-item {
      height: 50px;
      margin-bottom: 22px;

      .el-form-item__content {
        height: 50px;
      }
    }
    .el-input {
      width: 100%;

      .el-input__inner {
        height: 50px;
      }
      .el-input__suffix {
        line-height: 50px;
      }
    }
    .yzminput {
      width: 160px;
      margin-right: 30px;
      .el-input__inner {
        float: left;
      }
      .iconfont {
        font-size: 14px;
        margin-left: 5px;
      }
    }
    .yzmimg {
      .el-image__inner {
        // margin-left: 20px;
        width: 87%;
      }
    }
    .el-button {
      width: 100%;
      height: 50px;
      background: linear-gradient(262deg, #2e50e1, #6878f0);
      color: white;
      font-weight: 500;
      font-size: 16px;
      border-radius: 8px;
      .login-container {
        text-shadow: 0 7px 22px #cfcfcf;
      }
    }
  }
}
</style>
